<template>
	<view class="order  xbs">
		<view class="top xflex-x-between ">
			<view class="xflex-x">
				
				<view class="sn">
					{{info.hotel.name}}
				</view>
			</view>
			<view class="xcf state">
				待入住
			</view>
		</view>
		
		<view class="xp24-32" style="padding-top: 0;">
			
			<view class="hgotel-top xflex-x xmt12">
				<image class="hgotel-img xmr20" :src="info.hotel.image" mode=""></image>
				<view class="hgotel-info">
					<view class="">
						{{info.order_info.adult}}成人, {{info.order_info.children}}儿童 {{info.order_info.house}}间，{{info.order_info.house_name}}
					</view>
					<view class="xmt12">
						{{info.order_info.time}}, {{info.order_info.house}}晚
					</view>
					<view class="xmt32">
						 单价:￥{{info.price}} 总价:￥{{info.total_amount}}
					</view>
				</view>
			</view>
			
			<view class="hgotel-infos xmt32">
				<view class="xflex-x">
					<view class="hgotel-confirm xmr10">
						待确认
					</view>
					<image class="hgotel-jt" src="/static/image/mine/jt1.png" mode=""></image>
				</view>
				
				<view class="hgotel-tips">
					酒店要求在12:00后办理入住，请留意行程安排。{{info.start}}18:00前可免费取消
				</view>
			</view>
			
			
			<view class="xflex-x-between xmt32">
				<view class="code">
					核销码：{{info.verify_code}}
				</view>
				
				<view class="xflex-x">
					<!-- <view class="btn xmr20" @click="cancel()">
						取消订单
					</view> -->
					<view class="btn" @click="topages('/pagesA/page/detail/checked/checked?id='+info.id)">
						查看订单
					</view>
				</view>
			</view>
			
			
			
		</view>
		
	</view>
</template>

<script setup>
	import {
		hotelcancel,
		hotelpublish
	} from "/network/home.js"
	import {
		defineProps,
		defineEmits
	} from 'vue'
	let props = defineProps(['info'])

	let emit = defineEmits('updata')
	
	const topages =(url) =>{
		console.log(url);
		uni.navigateTo({
			url:url
		})
	}
	
	const cancel = () =>{
		hotelcancel({
			id:props.info.id
		}).then(res=>{
			uni.showToast({
				icon:"none",
				title:'取消成功'
			})
			emit('updata')
		})
	}
</script>

<style lang="scss" scoped>
	
	.order {
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	.xz {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.top{
		padding: 24rpx 29rpx 30rpx;
		// box-sizing: border-box;
		// background: #B5B5B5;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.sn {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.state {
		font-weight: 500;
		font-size: 24rpx;
		color: #198FFF;
	}
	.addicon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}
	
	.hgotel {
		
		&-img {
			width: 138rpx;
			height: 138rpx;
			background-color: #198FFF;
			border-radius: 12rpx;
		}
		&-info {
			font-weight: 400;
			font-size: 24rpx;
			color: #222222;
		}
		
		&-infos {
			padding: 20rpx 32rpx;
			background: #F8F8F8;
			border-radius: 20rpx;
		}
		&-jt {
			width: 24rpx;
			height: 24rpx;
		}
		&-confirm {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}
		&-tips {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-top: 17rpx;
		}
	}
	
	.code {
		font-weight: bold;
		font-size: 28rpx;
		color: #198FFF;
	}
	
	.btn{
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 88rpx;
		text-align: center;
	}
	
</style>
